{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WMS 移动日志仓储系统</title>
    <link href="{% static 'plugins/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'plugins/fontawesome-free-6.7.2-web/css/all.min.css' %}">

    <style>
        :root {
            --primary-color: #3b82f6;
            --secondary-color: #64748b;
            --background-color: #f8fafc;
        }

        body {
            background: var(--background-color);
            font-family: 'Inter', 'Helvetica Neue', Arial, 'PingFang SC', sans-serif;
        }

        .main-container {
            max-width: 1440px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        /* 查询区域 */
        .query-box {
            background: white;
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .form-control {
            border: 1px solid #e2e8f0;
            border-radius: 0.5rem;
            padding: 0.625rem 1rem;
        }

        /* 数据表格 */
        .data-table {
            --bs-table-striped-bg: #f8f9fa;
            border-radius: 0.75rem;
            overflow: hidden;
        }

        .data-table thead th {
            background: var(--primary-color);
            color: white;
            padding: 1rem;
            font-weight: 500;
        }

        .data-table tbody td {
            padding: 0.875rem;
            border-color: #f1f5f9;
        }

        /* 统计卡片 */
        .stats-card {
            background: white;
            border-radius: 0.75rem;
            padding: 1.25rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        /* 分页 */
        .pagination .page-link {
            border-radius: 0.5rem;
            min-width: 2.5rem;
            text-align: center;
            border: none;
        }

        /* 按钮 */
        .btn-primary {
            background: var(--primary-color);
            border: none;
            padding: 0.625rem 1.25rem;
            border-radius: 0.5rem;
        }

        @media (max-width: 768px) {
            .main-container {
                margin: 1rem auto;
                padding: 0 0.75rem;
            }

            .query-box {
                padding: 1rem;
            }

            .data-table thead th {
                font-size: 0.875rem;
            }
        }
    </style>
</head>
<body>
<div class="main-container">
    <!-- 查询条件 -->
    <div class="query-box">
        <form method="get" class="row g-3 align-items-center">
            <div class="col-lg-3 col-md-6 mb-2">
                <input type="text" class="form-control"
                       name="item_name" placeholder="物品名称" value="{{ item_name }}">
            </div>
            <div class="col-lg-3 col-md-6 mb-2">
                <input type="text" class="form-control"
                       name="operator" placeholder="操作人" value="{{ operator }}">
            </div>
            <div class="col-lg-3 col-md-6 mb-2">
                <input type="text" class="form-control"
                       name="original_location" placeholder="原货位" value="{{ original_location }}">
            </div>
            <div class="col-lg-3 col-md-6 mb-2">
                <input type="text" class="form-control"
                       name="destination_location" placeholder="目的货位" value="{{ destination_location }}">
            </div>

            <!-- 新增：发货类型 -->
            <div class="col-lg-3 col-md-6 mb-2">
                <select name="shipment_type" class="form-control">
                    <option value="">上架类型</option>
                    <option value="有码上架" {% if shipment_type == '有码上架' %}selected{% endif %}>有码上架</option>
                    <option value="无码上架" {% if shipment_type == '无码上架' %}selected{% endif %}>无码上架</option>
                </select>
            </div>

            <div class="col-12 d-flex justify-content-end gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-search me-2"></i>查询
                </button>
                <button type="button" class="btn btn-light" id="resetBtn">
                    <i class="fas fa-undo me-2"></i>重置
                </button>
            </div>
        </form>
    </div>

    <!-- 统计信息 -->
    <div class="row g-3 mb-4">
        <div class="col-md-6">
            <div class="stats-card">
                <div class="d-flex align-items-center">
                    <i class="fas fa-cubes text-primary me-3"></i>
                    <div>
                        <div class="h5 mb-0">{{ total_quantity }}</div>
                        <small class="text-secondary">总库存数量</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="stats-card">
                <div class="d-flex align-items-center">
                    <i class="fas fa-pallet text-primary me-3"></i>
                    <div>
                        <div class="h5 mb-0">{{ total_pallets }}</div>
                        <small class="text-secondary">总托盘数量</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 数据表格 -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table data-table">

                    <tbody>
                        {{ html_table|safe }}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 分页控制 -->
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-3">
        <div class="d-flex align-items-center gap-3">
            <form method="get" class="d-flex align-items-center gap-2">
                <select name="per_page" class="form-select" onchange="this.form.submit()" style="width: 120px;">
                    <option value="10" {% if per_page == 10 %}selected{% endif %}>每页10条</option>
                    <option value="20" {% if per_page == 20 %}selected{% endif %}>每页20条</option>
                    <option value="50" {% if per_page == 50 %}selected{% endif %}>每页50条</option>
                </select>
            </form>

            <nav>
                <ul class="pagination mb-0">
                    {% if page > 1 %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page|add:-1 }}&{{ request.GET.urlencode }}#">
                            <i class="fas fa-chevron-left"></i>
                        </a>
                    </li>
                    {% endif %}

                    {% for p in page_range %}
                    <li class="page-item {% if p == page %}active{% endif %}">
                        <a class="page-link" href="?page={{ p }}&{{ request.GET.urlencode }}">{{ p }}</a>
                    </li>
                    {% endfor %}

                    {% if page < total_pages %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page|add:1 }}&{{ request.GET.urlencode }}#">
                            <i class="fas fa-chevron-right"></i>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>

        <form method="get" class="d-flex align-items-center gap-2">
            <input type="number" name="page" min="1" max="{{ total_pages }}"
                   value="{{ page }}" class="form-control" style="width: 100px;">
            <button type="submit" class="btn btn-primary">跳转</button>
        </form>
    </div>

    <!-- 下载按钮 -->
    <div class="text-center">
        <a href="{% url 'download' %}?{{ request.GET.urlencode }}" class="btn btn-outline-primary">
            <i class="fas fa-download me-2"></i>导出数据
        </a>
    </div>
</div>

<script src="{% static 'plugins/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js' %}"></script>
<script>
    // 重置按钮功能
    document.getElementById('resetBtn').addEventListener('click', function() {
        const url = new URL(window.location.href);
        ['item_name', 'operator', 'page', 'original_location',
         'destination_location', 'shipment_type', 'per_page'].forEach(param => {
            url.searchParams.delete(param);
        });
        window.location.href = url.toString();
    });
</script>
</body>
</html>